<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动</title>
		<link rel="stylesheet" href="index.css">
		<!-- <style type="text/css">
			/* 2. 父级添加overflow ； 其他不变*/
			/* .father_f {
				overflow: hidden;
				width: 500px;
				background-color: lightblue;
			} 
			*/
			
			
			.father_f {
				width: 500px;
				background-color: lightblue;
			}
			.son_f {
				float: left;
			}
			.son_f:nth-child(1) {
				width: 100px;
				height: 100px;
				background-color: lightcoral;
			}
			.son_f:nth-child(2) {
				width: 200px;
				height: 200px;
				background-color: lightsalmon;
			}
			.father_f2 {
				width: 500px;
				height: 150px;
				background-color: #000000;
			}
			
			/* 3. 使用after伪元素清除浮动*/
			/* .clearfix:after {  
				content: ""; 
				display: block; 
				height: 0; 
				clear: both; 
				visibility: hidden;  
			}   
			
			.clearfix {
				*zoom: 1;	/* IE6、7 专有 */	
			/*} */
			
			/* 4. 使用双伪元素清除浮动 */
			.clearfix:before,.clearfix:after { 
			  content:"";
			  display:table; 
			}
			.clearfix:after {
			  clear:both;
			}
			.clearfix {
			  *zoom:1; 	/* IE6、7 专有 */	
			}
		</style> -->
	</head>
	<body>
		<h3>浮动产生的原因</h3>
		<p>父元素不方便给高度，子元素产生浮动脱离标准流，导致后方的内容上移</p>

		<div class="father1">
			<div class="son">子元素一</div>
			<div class="son">子元素二</div>
		</div>
		<div class="father2">叔叔级别</div>

		<br>
		<br>
		<br>
		<br>

		<h4>1.额外标签法</h4>
		<p>在浮动元素后使用一个空元素清除左右浮动。<pre>&lt;div style="clear:both"&gt;&lt;/div&gt;</pre>注意：需要使用块级标签</p>
		<!-- 1. 额外标签法 -->
		<div class="father1">
			<div class="son">子元素一</div>
			<div class="son">子元素二</div>
			<div style="clear:both"></div>
		</div>
		<div class="father2"></div>

		<br>
		<br>
		<br>
		<br>
		
		<h4>2.父级添加overflow</h4>
		<p>给浮动元素的容器添加overflow:hidden;或overflow:auto;</p>

		<!-- 2. 父级添加overflow -->
		<div class="father1 method2">
			<div class="son">子元素一</div>
			<div class="son">子元素二</div>
		</div>
		<div class="father2"></div>

		<br>
		<br>
		<br>
		<br>

		<h4>3. 使用after伪元素清除浮动</h4>
		<p>给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。注意IE6需要触发hasLayout,设置zoom:1</p>

		<!-- 3. 使用after伪元素清除浮动 -->
		<div class="father1 clearfix">
			<div class="son">子元素一</div>
			<div class="son">子元素二</div>
		</div>
		<div class="father2"></div>
		
		<br>
		<br>
		<br>
		<br>

		<h4>4. 使用双伪元素清除浮动</h4>
		<p>使用双伪元素</p>
		
		<!-- 4. 使用双伪元素清除浮动 -->
		<div class="father1 clearfix2">
			<div class="son">子元素一</div>
			<div class="son">子元素二</div>
		</div>
		<div class="father2"></div>
	</body>
</html>
